<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    </style>
    <script>
        // var box = document.getElementById("box")
        // console.log(box);
        
        // onload = function(){
        //     var box = document.getElementById("box")
        //     console.log(box);
        // }
    </script>
</head>
<body style="height:1000px;">
    <div id="box"></div>
    <img id="img" src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png" alt="">
</body>
<script>

    // var box = document.getElementById("box")
    // console.log(box);

    // var img = document.getElementById("img");
    // console.log(img);

    // window.onload = function(){
    //     console.log(img.offsetWidth);
    //     console.log(img.offsetHeight);
    // }

    // ======
    
    // img.onload = function(){
    //     console.log(img.offsetWidth);
    //     console.log(img.offsetHeight);
    // }

    // ======

    // onscroll = function(){
        // 滚走的距离顶部的尺寸
        // var t = document.documentElement.scrollTop;
        // console.log(t);
        // 滚走的距离左侧的尺寸
        // var l = document.documentElement.scrollLeft;
        // console.log(l);
    // }

    // =======

    // onresize = function(){
        // 获取浏览器的可视区域的宽
        // var w = document.documentElement.clientWidth;
        // console.log(w)
        // 获取浏览器的可视区域的高
        // var h = document.documentElement.clientHeight;
        // console.log(h)
    // }
    
</script>
</html>